<template>
    <div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <div class="layui-col-space5">
                            <div class="layui-inline layui-show-xs-block">
                                <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input" v-model="searchInfo">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <button class="layui-btn"><i class="layui-icon" @click="searchClient(searchInfo)">&#xe615;</i></button>
                            </div>
                        </div>

                    </div>
                    <div class="layui-card-header">
                        <button class="layui-btn" @click="addClient()"><i class="layui-icon"></i>添加</button>
                    </div>
                    <div class="layui-card-body layui-table-body layui-table-main">
                        <table class="layui-table layui-form">
                            <thead>
                            <tr>
                                <th style="width: 100px">客户名称</th>
                                <th style="width: 30px">联络人</th>
                                <th style="width: 20px;">客户类型</th>
                                <th style="width: 90px;">电话</th>
                                <th style="width: 7%;">来源</th>
                                <th style="width: 3%;">负责人</th>
                                <th>地址</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in clientData">
                                <td>
                                    {{item.client}}
                                </td>
                                <td>
                                    {{item.name}}
                                </td>
                                <td>
                                    {{item.type}}
                                </td>
                                <td>
                                    {{item.phone}}
                                </td>
                                <td>
                                    {{item.source}}
                                </td>
                                <td>
                                    {{item.client_eid}}
                                </td>
                                <td>
                                    {{item.province}}{{item.city}}{{item.district}}
                                </td>
                                <td class="td-manage">
                                    <a title="编辑" class="layui-btn" @click.stop="openedit(item)" href="javascript:;">
                                        <i class="layui-icon">&#xe642;</i>
                                    </a>
                                    <a title="移至公海" class="layui-btn layui-btn-danger" @click="tosea(this,item.id,item.client)" href="javascript:;">
                                        <i>移至公海</i>
                                    </a>
                                    <a title="作废" class="layui-btn layui-btn-danger" @click="drop(item.id,item.client)" href="javascript:;">
                                        <i>作废</i>
                                    </a>
                                </td>

                            </tr>
                            </tbody>
                        </table>
                        <my-page :total="count" v-if="showPage"></my-page>
                    </div>

                </div>
            </div>
        </div>
    </div>
    </div>
</template>

<script>

    import { mapActions, mapState } from "vuex";
    import memberedit from './member-edit';
    import page from './pagination'
    import memberadd from './member-add'
    import cityPicker from 'v-distpicker'

    export default {
        data(){
            return{
                searchInfo:"",
                showPage:true
            }
        },
        name: "member-list",
        components:{
            'my-page':page,
            'myCityPicker':cityPicker,
        },
        created() {
            this.getClients();
            this.getClientsCounts();
        },
        computed:{
            ...mapState({
                clientData:state=>state.clientData,
                count:state=>state.clientCount,
            })
        },
        methods:{
            drop(id,name){
                let vm = this;
                layer.confirm('确认要作废 '+name+' ？ （可在作废区恢复）',function(){
                    vm.dropclient(id);
                    setTimeout(vm.getClients,500);
                    setTimeout(vm.getClientsCounts,500);
                });

            },
            searchClient(param){
                this.showPage = false;
                this.searchClient(param);
            },
            member_del(obj,id,client){
                let vm = this
                layer.confirm('确认删除 '+client+' ？',function(){
                    vm.deleteClient(id);
                    setTimeout(vm.getClients,500);
                    setTimeout(vm.getClientsCounts,500);
                });
            },
            tosea(obj,id,client){
                let vm = this
                layer.confirm('确认将 '+client+'  手动移至客户公海？',function(){
                    vm.movetosea(id);
                    setTimeout(vm.getClients,500);
                    setTimeout(vm.getClientsCounts,500);
                });
            },
            notDeleted(id){
                return true;
            },
            openedit(item){
                this.$layer.open({
                    id:1,
                    type:2,
                    content: {
                        content: memberedit, //传递的组件对象
                        parent: this,//当前的vue对象
                        data:{singleClient:item}//props
                    },
                    area:['800px','600px'],
                    title: '编辑 '+item.name+' 的用户信息',
                    maxmin: true,
                });
            },
            addClient(){
                this.$layer.open({
                    id:1,
                    type:2,
                    content: {
                        content: memberadd, //传递的组件对象
                        parent: this,//当前的vue对象
                    },
                    area:['800px','600px'],
                    title: '添加新用户',
                    maxmin: true,
                });
            },
            ...mapActions(["getClients","getClientsCounts","deleteClient","movetosea","searchClient","dropclient"])
        },
        mounted(){
        },
    }


</script>

<style scoped>
    .divwrap{
        height: 400px;
        overflow-y: auto;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
    }
    .divwrap>>>.distpicker-address-wrapper{
        color: #999;
    }
    .divwrap>>>.address-header{
        position: fixed;
        bottom: 400px;
        width: 100%;
        background: #000;
        color:#fff;
    }
    .divwrap>>>.address-header ul li{
        flex-grow: 1;
        text-align: center;
    }
    .divwrap>>>.address-header .active{
        color: #fff;
        border-bottom:#666 solid 8px
    }
    .divwrap>>>.address-container .active{
        color: #000;
    }
</style>